// const IconParkKeys = {
//   "general-default": "general-default",
//   "cursor-default": "cursor-default",
// };

// type IconParkKeyType = keyof typeof IconParkKeys;

// type TOption = {
//   prefix: string;
//   label: string;
//   // 快捷键
//   shortcut?: (string | IconParkKeyType)[];
// };

// interface OptionsProps {
//   // 内容 key 用于 tab 切换
//   key: string;
//   // 配置项
//   option: TOption[];
// }

// const isIconParkKey = (
//   item: string | IconParkKeyType
// ): item is IconParkKeyType => {
//   return Object.keys(IconParkKeys).includes(item as IconParkKeyType);
// };

// const item = (props: TOption) => {
//   const { prefix, label, shortcut } = props;
//   return (
//     <div>
//       <div>{prefix}</div>
//       <div>{label}</div>
//       {shortcut?.map((item, index) =>
//         isIconParkKey(item) ? (
//           <Svg key={index}>

//             {item}
//           </Svg>
//         ) : (
//           <div key={index}>{item}</div>
//         )
//       )}
//     </div>
//   );
// };

// interface shortcutProps {
//   //快捷键的值
//   value: string;
//   //快捷键组合
//   Shortcut: string[];
// }
// //存入localstorage中的类型
// interface LocalShortcutProps extends shortcutProps {
//   //按下次数
//   count: number;
// }
// //快捷键配置
// const shortcutConfig = [
//   {
//     value: "oneShort",
//     Shortcut: ["mod", "/"],
//   },
//   {
//     value: "twoShort",
//     Shortcut: ["mod", "+"],
//   },
// ];
// //快捷键按下回调
// function onKeyDown(val: shortcutProps) {
//   const lsc = localStorage.getItem("shortcut");
//   let matchFound = false;
//   if (lsc) {
//     const lscArr: LocalShortcutProps[] = JSON.parse(lsc);
//     // 判断是否使用过该快捷键
//     for (let item of lscArr) {
//       if (item.value === val.value) {
//         //   使用过：使用次数加1
//         item.count++;
//         matchFound = true;
//         break;
//       }
//     }
//     if (!matchFound) {
//       // 未找到匹配项：添加新元素
//       lscArr.push({ ...val, count: 1 });
//     }
//     localStorage.setItem("shortcut", JSON.stringify(lscArr));
//   } else {
//     // 初始化数组并设置它
//     const initialArray: LocalShortcutProps[] = [{ ...val, count: 1 }];
//     localStorage.setItem("shortcut", JSON.stringify(initialArray));
//   }
// }
// "use client";
// import React, { useState, useRef, useEffect } from "react";
// import "./test.scss";

// export const DraggableNavbar: React.FC = () => {
//   const [scrollX, setScrollX] = useState(0);
//   const navbarRef = useRef(null);
//   const containerRef = useRef(null);
//   let isDragging = false;
//   let startX;

//   const handleMouseDown = (e) => {
//     isDragging = true;
//     startX = e.clientX - containerRef.current.scrollLeft;
//     document.addEventListener("mousemove", handleMouseMove);
//     document.addEventListener("mouseup", handleMouseUp);
//   };

//   const handleMouseMove = (e) => {
//     if (isDragging) {
//       const newScrollX = e.clientX - startX;
//       setScrollX(newScrollX); // 这里实际上不会直接滚动，而是用于状态管理
//       containerRef.current.scrollLeft = newScrollX; // 直接设置滚动容器的scrollLeft
//     }
//   };

//   const handleMouseUp = () => {
//     isDragging = false;
//     document.removeEventListener("mousemove", handleMouseMove);
//     document.removeEventListener("mouseup", handleMouseUp);
//   };

//   useEffect(() => {
//     return () => {
//       document.removeEventListener("mousemove", handleMouseMove);
//       document.removeEventListener("mouseup", handleMouseUp);
//     };
//   }, []);

//   return (
//     <div
//       className="navbar-container"
//       ref={containerRef}
//       onMouseDown={handleMouseDown}
//       style={{ overflowX: "auto", whiteSpace: "nowrap" }}
//     >
//       <div
//         className="navbar"
//         ref={navbarRef}
//         style={{ display: "inline-block", willChange: "transform" }}
//       >
//         <div className="navbar-item">Item 1</div>
//         <div className="navbar-item">Item 2</div>
//         <div className="navbar-item">Item 3</div>
//         {/* 添加更多项直到溢出容器宽度 */}
//       </div>
//     </div>
//   );
// };
